<template>
	<div class="wrapper">
		<div v-for="item of iconList" :key="item.id" class="icon" >
			<div class="icon-img">
				<img class="img" :src="item.imgUrl" :class="[item.color]">
			</div>
			<div class="icon-desc">{{item.desc}}</div>
		</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'homeCatalog',
	props:{
		iconList:Array
	},
	data(){
		return{
			red: 'red',
			orange: 'orange',
			green: 'green',
			blue: 'blue'
		}
	}
}
</script>

<style lang="stylus" scoped>
.wrapper
	background: #FFFFFF
	padding-top: .2rem
	display: flex
	.icon
		width: 25%
		.img
			width: 50%
			display: block
			background:red
			border-radius :1rem
			margin: 0 auto
		.red
			background: #ff7066
		.blue
			background: #36a4f9
		.green
			background: #66ba0d
		.orange
			background: #ffa41f
		.icon-desc
			text-align: center
			padding-top: .2rem
			padding-bottom: .3rem 

</style>
